/**
 * Created by sylarSong on 16/12/5.
 */
//所有图标大小适配
$(document).ready(function () {
    // $("#pie-chart-player-area").width($(".dashboard-widget").width() - 50);
    // $("#point-chart").width($(".dashboard-widget").width() - 50);
    // $("#pie-chart-player-gender").width($(".dashboard-widget").width() - 50);
});
//当屏幕尺寸改变时, 图标的尺寸获得相应改变
window.onresize = function () {
    $("#line-chart-gender-loginTime-24").width($(".dashboard-widget").width() - 50);
    $("#line-chart-isPay-loginTime-24").width($(".dashboard-widget").width() - 50);
    $("#pie-chart-player-area").width($(".grid-6").width() - 50);
    $("#pie-chart-player-gender").width($(".grid-6").width() - 50);
    $("#histogram-chart-chest-count").width($(".grid-6").width() - 50);
    $("#pie-chart-player-NumberOfBoard").width($(".grid-6").width() - 50);
    $("#histogram-chart-player-NumberOfBoard").width($(".grid-6").width() - 50);
    $("#histogram-chart-pay-card").width($(".grid-6").width() - 50);
    pie_chart_player_area.resize();
    pie_chart_player_gender.resize();
    histogram_chart_chest_count.resize();
    line_chart_gender_loginTime_24.resize(); // 不同性别登录时间分布
    line_chart_isPay_loginTime_24.resize(); //付费玩家与非付费玩家24小时登录情况
    histogram_chart_pay_card.resize();             //玩家道具购买显示
    pie_chart_player_NumberOfBoard.resize(); //房间局数占比图
    histogram_chart_layer_NumberOfBoard.resize(); //底分-人数分布图
};
var pie_chart_player_area = echarts.init(document.getElementById('pie-chart-player-area')); // 玩家地域分布
var pie_chart_player_gender = echarts.init($("#pie-chart-player-gender")[0]);               //玩家性别分布
var line_chart_gender_loginTime_24 = echarts.init($("#line-chart-gender-loginTime-24")[0]); // 不同性别登录时间分布
var line_chart_isPay_loginTime_24 = echarts.init($("#line-chart-isPay-loginTime-24")[0]); //付费玩家与非付费玩家24小时登录情况
var histogram_chart_chest_count = echarts.init($("#histogram-chart-chest-count")[0]);       //救济金宝箱点击情况
var histogram_chart_pay_card = echarts.init($("#histogram-chart-pay-card")[0]);             //玩家道具购买显示
var pie_chart_player_NumberOfBoard = echarts.init($("#pie-chart-player-NumberOfBoard")[0]); //房间局数占比图
var histogram_chart_layer_NumberOfBoard = echarts.init($("#histogram-chart-player-NumberOfBoard")[0]); //底分-人数分布图

// 数据获取并填充开始********************************************************************************************
$(document).ready(function () {
    // 分布区域饼图数据结构  需要使用ajax获取真正数据 TODO
    var area_data = [
        {value: 335, name: '广东'},
        {value: 310, name: '广西'},
        {value: 234, name: '福建'},
        {value: 135, name: '浙江'},
        {value: 1548, name: '杭州'}
    ];
    pie_chart_player_area.showLoading();
    $.get('/stats_ajax/player_area', {'_': $.now()}, function (data) {
        get_pie_chart_player_area_option(pie_chart_player_area, data);
    });


    // 性别比例 饼图数据结构 需要使用ajax获取真正数据
    pie_chart_player_gender.showLoading();
    $.get('/stats_ajax/player_percent_by_sex', {'_': $.now()}, function (data) {
        get_piechart_player_gender_option(pie_chart_player_gender, data);
    });

    // 性别与登陆
    line_chart_gender_loginTime_24.showLoading();
    $.get('/stats_ajax/login_count_by_sex', {'_': $.now()}, function (data) {
        get_line_chart_gender_loginTime_24_option(line_chart_gender_loginTime_24, data);
    });


    // 付费与非付费登陆
    line_chart_isPay_loginTime_24.showLoading();
    $.get('/stats_ajax/login_players_by_payments', {'_': $.now()}, function (data) {
        get_line_chart_isPay_loginTime_24_option(line_chart_isPay_loginTime_24, data);
    });

});
// 数据获取并填充结束********************************************************************************************

// 玩家地域分布  数据信息处理********************************************************************************************
function get_pie_chart_player_area_option(instance, data) {
    var legends = [];
    for (var i = 0; i < data.length; i++) {
        legends.push(data[i]['name']);
    }
    var pie_chart_player_area_option = {
        title: {
            text: '玩家地域分布',
            subtext: '玩家+地域',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: legends
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    instance.setOption(pie_chart_player_area_option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}


// 玩家性别分布 饼图********************************************************************************************
function get_piechart_player_gender_option(instance, data) {
    pie_chart_player_gender_option = {
        title: {
            text: '玩家性别分布',
            subtext: '玩家+性别',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['男人', '女人']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    instance.setOption(pie_chart_player_gender_option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}

//性别与人数等登录时间(24小时)********************************************************************************************
function get_line_chart_gender_loginTime_24_option(instance, data) {
    var line_chart_gender_loginTime_24_option = {
        title: {
            text: '性别与人数等登录时间(人次)'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['男性', '女性']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '女性',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: data.female
            },
            {
                name: '男性',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: data.male
            }
        ]
    };

    instance.setOption(line_chart_gender_loginTime_24_option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}


// 付费玩家与非付费玩家24小时登录情况(24小时)********************************************************************************************
function get_line_chart_isPay_loginTime_24_option(instance, data) {
    line_chart_isPay_loginTime_24_option = {
        title: {
            text: '付费与非付费玩家登录时间(人次)'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['付费玩家', '免费玩家', '所有人群']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '付费玩家',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: data.pay
            },
            {
                name: '免费玩家',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: data.free
            }
        ]
    };
    instance.setOption(line_chart_isPay_loginTime_24_option);
    instance.hideLoading();
}


// 救济金宝箱点击情况********************************************************************************************
var dataAxis = ['宝箱1', '宝箱2', '宝箱3'];
var chest_count_data = [220, 182, 191];

var yMax = 500;
var dataShadow = [];

for (var i = 0; i < chest_count_data.length; i++) {
    // dataShadow.push(yMax);   //再次可以设置T轴最大值
}

histogram_chart_chest_count_option = {
    title: {
        text: '救济金宝箱点击情况',
        subtext: 'Chest Sample: chest onclick, count'
    },
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: {color: 'rgba(0,0,0,0.05)'}
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: chest_count_data
        }
    ]
};
histogram_chart_chest_count.setOption(histogram_chart_chest_count_option);

// 道具1,2,3购买情况********************************************************************************************


histogram_chart_pay_card_option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['VIP玩家', '普通玩家']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: [
        {
            type: 'value'
        }
    ],
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data: ['独立性房卡', '独立性房卡*10', '独立性房卡*30']
        }
    ],
    series: [
        {
            name: 'VIP玩家',
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data: [200, 170, 240]
        },
        {
            name: '普通玩家',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true
                }
            },
            data: [320, 302, 341]
        }
    ]
};
histogram_chart_pay_card.setOption(histogram_chart_pay_card_option);


// 不同局数对应人数情况********************************************************************************************
pie_chart_player_NumberOfBoard_option = {
    backgroundColor: '#2c343c',

    title: {
        text: '局数-人数',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        {
            name: '局数-人数',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                {value: 335, name: '8局人数'},
                {value: 400, name: '16居人数'}
            ].sort(function (a, b) {
                return a.value - b.value
            }),
            roseType: 'angle',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
pie_chart_player_NumberOfBoard.setOption(pie_chart_player_NumberOfBoard_option);

// 底分-人数分布图********************************************************************************************
var dataMoney = ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"];
var chest_count_data = [130, 172, 106, 109, 130, 185, 147, 153, 164, 165];
var yMax = 500;

histogram_chart_layer_NumberOfBoard_option = {
    title: {
        text: '底分-人数分布图',
        subtext: 'X轴为分数,Y轴为人数'
    },
    xAxis: {
        data: dataMoney,
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: {color: 'rgba(0,0,0,0.05)'}
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: [],
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: chest_count_data
        }
    ]
};
histogram_chart_layer_NumberOfBoard.setOption(histogram_chart_layer_NumberOfBoard_option);


